<template>
    <div>
        <MyToast ref="myToast" />
        <div>
            <!-- <img @click="jump1('/dati_home')" src="@/assets/images/banner/banner.jpg" alt /> -->
            <!-- 积分权益兑换 -->
            <img @click="jump1('/equity')" src="@/assets/images/banner/banner.jpg" alt />
            <div class="icon">
                <div v-for="(item,index) in list" :Key="index" class="item" @click="jump(item.url,item)">
                    <img :src="item.icon.indexOf('http://') == -1 ? `http://img.580travel.com${item.icon}`:item.icon" alt />
                    <p>{{item.name}}</p>
                </div>
            </div>
            <Tabbar />
        </div>
    </div>
</template>
<script>
import MyToast from "./MyToast";
import { imgBaseUrl, baseUrl } from '@/config/env';
import Tabbar from '@/components/tabbar';
import weixin from '@/components/wx/wx.js';
import { Dialog } from 'vant';
// import moment from 'moment';
export default {
    provide() {
        return {
            tb: () => this._data
        }
    },
    data() {
        return {
            myToast: true,
            list: [],
            baseUrl,
            station: ''
        };
    },
    created() {
        // this.dialog();
        // this.station = window.sessionStorage.getItem('toast1');
    },
    mounted() {
        this.$refs.myToast.handleOpen();
        // this.initWxChat();
        // alert(localStorage.getItem('toast1'));
        // this.station = localStorage.getItem('toast1');
        this.$http
            .post('/routerNavigation/list', {
                rLevel: '1',
                parentId: ''
            })
            .then(res => {
                console.log(res);
                if (res.data.code === '0') {
                    this.list = res.data.object.list;
                }
            });
    },
    methods: {
        dialog() {
            Dialog.alert({
                title: '提示',
                message: '7月10日18:30-7月11日14:00  系统升级'
            }).then(() => {
                this.dialog();
            });
        },
        initWxChat: function () {
            const url = window.location.href.split('#')[0];
            const param = {
                title: '', // 分享标题
                desc: '', // 分享描述
                link:
                    baseUrl +
                    'personal/articleentrance?redir=' +
                    window.location.href.split('#')[1],
                imgUrl: imgBaseUrl + 'bocm/winCola/share.jpg',
                localUrl: url
            };
            weixin.wxChat(this, param);
        },
        jump1(page) {
            this.$router.push(page);
            // window.location.href = page;
        },
        jump(page, item) {
            if (page.indexOf('http') === -1) {
                if (item.isLast === '1') {
                    this.$router.push(page);
                } else {
                    this.$router.push({
                        path: page,
                        query: { id: item.id }
                    });
                }
            } else {
                window.location.href = page;
            }
        }
    },
    components: {
        Tabbar, MyToast
    }
};
</script>
<style lang="scss" scoped>
.icon {
  width: 100%;
  display: flex;
  flex-direction: row;
  // justify-content: space-around;
  flex-wrap: wrap;
  background-color: #ffffff;
  align-items: center;
  .item {
    position: relative;
    width: 185px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .hot {
      width: 50px;
      position: absolute;
      top: 0;
      right: 10px;
    }
    img {
      width: 81px;
    }
    p {
      font-size: 24px;
      color: #616161;
      margin-top: 20px;
    }
  }
}
.bottom_item {
  margin-top: 30px;
  width: 750px;
  height: 440px;
  background-color: #ffffff;
  .botttom_title {
    display: flex;
    flex-direction: row;
    padding-left: 30px;
    padding-top: 30px;
    img {
      width: 50px;
    }
    p {
      font-size: 30px;
      letter-spacing: 1px;
      color: #303030;
      padding-left: 20px;
    }
  }
  .card {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    img {
      width: 334px;
      margin-top: 30px;
    }
  }
}
</style>
